<%@page import="service.SellerService"%>
<%@page import="entities.SellerEntity"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>商家列表</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.js"></script>
<style type="text/css">
/*Demo Styles*/
.center {
	width: 960px;
	margin: auto;
	padding: 0px;
}

.block {
	float: left;
	position: relative;
	overflow: hidden;
	width: 200px;
	height: 150px;
	margin: 10px;
	background: #111 url(../img/progress.gif) no-repeat center center;
	border: 1px solid #fff;
	box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.5) !important;
}

.block:hover {
	box-shadow: none !important;
}

}
.floaltl {
	float: left;
}
</style>
</head>

<body>
	<jsp:include page="header.jsp"></jsp:include>
	<div style="height: 33px;"></div>
	<div class="center">
		<%
			List<SellerEntity> sellerList  =  SellerService.getAllSeller();
				for(SellerEntity seller :sellerList){
		%>
		<div class="block">
			<a href="menu.jsp?sellerId=<%=seller.getId()%>"
				class="sellerInfo floatl" title="<%=seller.getName()%>"
				rel="sellerInfo.jsp?id=<%=seller.getId()%>"> <img width="100%"
				height="100%" src="<%=seller.getLogoURL()%>" /> </a>
		</div>
		<%
			}
		%>
	</div>
	<jsp:include page="footer.jsp"></jsp:include>

	<script class="example" type="text/javascript">
		// 创建工具提示文件加载
		$(document)
				.ready(
						function() {

							// 使用each（）方法来获得每个元素的属性
							$('.sellerInfo')
									.each(
											function() {
												$(this)
														.qtip(
																{
																	content : {
																		// 设置您要使用的文字图像的HTML字符串，正确的src URL加载图像
																		text : '<img class="throbber" src="images/loading.gif" alt="Loading..." />',
																		url : $(
																				this)
																				.attr(
																						'rel'), // 使用的URL加载的每个元素的rel属性
																		title : {
																			text : $(
																					this)
																					.attr(
																							"title"), // 给工具提示使用每个元素的文本标题
																			button : '关闭' // 在标题中显示关闭文字按钮
																		}
																	},
																	position : {
																		corner : {
																			target : 'bottomMiddle', // 定位上面的链接工具提示
																			tooltip : 'topMiddle'
																		},
																		adjust : {
																			screen : true
																		// 在任何时候都保持提示屏幕上的
																		}
																	},
																	show : {
																		when : 'mouseover', //或click 
																		solo : true
																	// 一次只显示一个工具提示
																	},
																	hide : 'unfocus',
																	style : {
																		tip : true, // 设置一个语音气泡提示在指定工具提示角落的工具提示
																		border : {
																			width : 0,
																			radius : 4
																		},
																		name : 'light', // 使用默认的淡样式
																		width : 340
																	// 设置提示的宽度
																	}
																})
											});

						});
	</script>
</body>
</html>
